<template>
    <a-layout>
        <div class="pageTags">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
                    <router-link
                            v-if="item.name != name && index != 1"
                            :to="{ path: item.path === '' ? '/' : item.path }"
                    >{{ item.meta.title }}</router-link>
                    <span v-else>{{ item.meta.title }}</span>
                </a-breadcrumb-item>
            </a-breadcrumb>
            <br/>
            <h1>{{name}}</h1>
        </div>
        <div style="padding: 25px">
            <transition name="fade-transform" mode="out-in">
                <!--<keep-alive>-->
                    <router-view />
                <!--</keep-alive>-->
            </transition>
        </div>
    </a-layout>
</template>

<script>
    import RouteView from "./RouteView";
    export default {
        name: "PageView",
        components: {RouteView},
        data(){
            return {
                name:'',
                breadList: [],
            }
        },
        created(){
            this.getBreadcrumb()
        },
        watch: {
            $route () {
                this.getBreadcrumb()
            }
        },
        methods:{
            getBreadcrumb () {
                this.breadList = []
                // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
                this.name = this.$route.meta.title
                this.$route.matched.forEach(item => {
                    // item.name !== 'index' && this.breadList.push(item)
                    this.breadList.push(item)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .pageTags{
        background: #fff;
        text-align: left;
        padding: 15px 20px;
        h1{
            font-weight: 500;
            font-size: 20px;
            margin-bottom: 0;
        }
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.28s;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    /*fade-transform*/
    .fade-transform-leave-active,
    .fade-transform-enter-active {
        transition: all .5s;
    }

    .fade-transform-enter {
        opacity: 0;
        transform: translateX(-30px);
    }

    .fade-transform-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }

    /*breadcrumb transition*/
    .breadcrumb-enter-active,
    .breadcrumb-leave-active {
        transition: all .5s;
    }

    .breadcrumb-enter,
    .breadcrumb-leave-active {
        opacity: 0;
        transform: translateX(20px);
    }

    .breadcrumb-move {
        transition: all .5s;
    }

    .breadcrumb-leave-active {
        position: absolute;
    }
</style>
